<!-- 我的客人 -->
<template>
	<view class="my-guest" :style="{ '--color': vuex_config.themeColor1 }">
		<view class="my-guest-top">
			<view class="nav-guest">
				<view
					class="nav-guest-item"
					:class="{ 'nav-guest-color': item.id == navId ? true : false }"
					v-for="(item, index) in navList"
					:key="item.id"
					@click="jumpGuestNav(item.id)"
				>
					{{ item.title }}
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="my-guest-content">
			<view class="guest-content-item" v-for="(item, index) in dataList" :key="index">
				<!-- <view>{{ index + 1 }}</view> -->
				<view class="guest_content">
					<image class="image" :src="item.headimgurl" mode="aspectFill"></image>
					<view class="cont_main">
						<view class="content_top">
							<view class="user_name u-line-1">{{ item.nickname }}</view>
							<view class="label_border level">{{ item.level_name || '普通会员'}}</view>
						</view>
						<view class="u-font-24 content-time ">{{ item.date_creation | formTime() }}</view>
					</view>
					<view class="content_btn" @click="disOder(item)" v-if="item.type == 2 || item.type == 4">分享订单</view>
				</view>
			</view>
		</view>
		<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>
	</view>
</template>

<script>
import { pagingMixin } from '@/mixins/pagingMixin.js';
import { formatDate } from '@/utils/moment/index.js';
export default {
	mixins: [pagingMixin],
	data() {
		return {
			// 数据内容
			dataList: [],
			// tabs循环切换标题
			navList: [
				{
					title: '会员',
					id: 1
				},
				{
					title: '推荐官',
					id: 2
				}
			],
			navId: 1 // 当前tab
		};
	},
	filters: {
		formTime(time) {
			return formatDate(time, 'YYYY-MM-DD HH:mm');
		}
	},
	onLoad: function(options) {
		this.initPage();
	},

	onReachBottom: function() {
		this.loadMore();
	},
	methods: {
		// 切换tabs
		jumpGuestNav(id) {
			this.navId = id;
			this.initPage();
		},
		initPage() {
			this._init_data('GetMyGuestUsersList', {
				type: this.navId
			});
		},
		loadMore() {
			this._load_data();
		},
		// 跳转到分销订单  TODO
		disOder(item) {
			this.$linkTo(`/package/distribution/orderList/index?user=${item.pk_id}`);
		}
	}
};
</script>

<style lang="scss" scoped>
.my-guest-top {
	width: 100%;
	background-color: #ffffff;
	z-index: 88;
	padding: 24rpx;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.nav-guest {
	border: 1px solid var(--color);
	border-radius: 10rpx;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	background-color: var(--color);
}

.nav-guest-item {
	flex: 1;
	text-align: center;
	line-height: 60rpx;
	color: var(--color);
	background-color: #ffffff;
	font-size: 30rpx;
	height: 60rpx;
}

.nav-guest-color {
	color: #ffffff;
	background-color: var(--color);
}

.line {
	height: 120rpx;
	width: 100%;
	border-bottom: 10rpx solid #f5f5f5;
}

.guest-content-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	&:last-of-type .guest_content {
		border-bottom: none;
	}
}

.my-guest-content {
	padding: 0 24rpx;
}
.guest_content {
	align-items: center;
	display: flex;
	flex: 1;
	overflow: hidden;
	padding: 26rpx 0;
	border-bottom: 1px solid #f5f5f5;
	.image {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}
	.cont_main {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.content_top {
			flex: 1;
			overflow: hidden;
			padding-right: 10rpx;
			display: flex;
			align-items: center;
			.user_name{
				max-width: 300rpx;
				font-size: 30rpx;
			}
			.level {
				color: var(--color);
				border-radius: 6rpx;
				margin-left: 12rpx;
				font-size: 24rpx;
				padding: 4rpx 12rpx;
			}
		}
	}
}

.content_btn {
	width: 120rpx;
	height: 44rpx;
	border: 1rpx solid rgba(153, 153, 153, 1);
	border-radius: 4rpx;
	text-align: center;
	line-height: 42rpx;
	font-size: 24rpx;
	color: #999999;
}

.content-time {
	color: #999999;
	margin-top: 6rpx;
}
</style>
